<template>
  <div 
  class="clspic"
  :class="{ zoomed: isZoomed }"
  @click="toggleZoom" >
    <img   v-if="isSvg" :src="picPath"  />
    <el-image  v-else-if="!isSvg" :src="picPath"  />
  </div>
</template>

<script>

export default {
  name: "ComptDisplayPic",
  props:{ dirpath: String, picfilename: String },

  computed: {
    isSvg() {
      return this.picfilename.includes(".svg")
    },
    picPath(  ){
      if( this.dirpath == "/" )
        return "images" + this.dirpath + this.picfilename
      else
        return "images" + this.dirpath + "/" + this.picfilename
    }

  },
  created() {
  },
  data(){
    return{
      isZoomed: false,
    }
  },
  methods:{
    toggleZoom() {
      // console.log( "zoom:", this.isZoomed )
      // this.isZoomed = !this.isZoomed;
    },
  },

}

</script>

<style scoped>

.clspic{
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease; /* 平滑过渡 */
}

.clspic img{
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* 平滑过渡 */
} 

.clspic el-image{
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* 平滑过渡 */
} 

.clspic.zoomed {
  transform: scale(5); /* 放大倍数 */
}

.clspic:hover {
  transform: scale(5); /* 放大倍数 */
}

</style>

